﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MayMay编辑器</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.jsdelivr.net/npm/@@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->
    <link href="https://unpkg.com/@@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <link href="~/css/site.css" rel="stylesheet" />
    <link href="~/css/highlight.androidstudio.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/chat"></script>
    <script src="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/html-docx.js"></script>
    <script src="~/js/FileSaver.js"></script>
    <script src="~/js/copy.js"></script>
    <script src="~/js/markdown-it.min.js"></script>
    <script src="~/js/highlight.min.js"></script>
    <script src="~/js/site.js"></script>
    <script src="~/js/plugin.js"></script>
</head>

<body>
    <div id="top-container">
        <p>
            【鸣谢——<a href="https://www.wangeditor.com/">wangEditor</a>】【 AI对话聚合平台，请前往<a href="https://maymay5.com">maymay5.com</a>】【 Gitee：<a href="https://gitee.com/kk502/may-editor">https://gitee.com/kk502/may-editor</a>】
        </p>
    </div>
    <div style="border-bottom: 1px solid #e8e8e8;">
        <div id="editor-toolbar"></div>
    </div>
    <div id="content">
        <div id="editor-container">
            @*<div id="title-container">
                    <input placeholder="Page title...">
                </div>*@
            <div id="editor-text-area"></div>
        </div>
    </div>

    <!-- <script src="https://cdn.jsdelivr.net/npm/@@wangeditor/editor@latest/dist/index.min.js"></script> -->
    <script src="https://unpkg.com/@@wangeditor/editor@latest/dist/index.js"></script>
    <script>
        const E = window.wangEditor
        const SaveConf = {
            key: 'saveBtn', // 定义 menu key ：要保证唯一、不重复（重要）
            factory() {
                return new SaveButtonMenu() // 把 `YourMenuClass` 替换为你菜单的 class
            }
        }
        const AIConf = {
            key: 'aiBtn', // 定义 menu key ：要保证唯一、不重复（重要）
            factory() {
                return new AIButtonMenu() // 把 `YourMenuClass` 替换为你菜单的 class
            }
        }
        const module = {
            menus: [SaveConf, AIConf],
        }
        E.Boot.registerModule(module)

        // 切换语言
        const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
        E.i18nChangeLanguage(LANG)

        const editorConfig = {
            placeholder: '写点什么？',
            scroll: false, // 禁止编辑器滚动
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'your-fileName',
                    base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                }
            },
            hoverbarKeys: {

            },
            onChange(editor) {
                //console.log(editor.getHtml())
            },
        }
        editorConfig.hoverbarKeys = {
            'text': {
                menuKeys: ["headerSelect", "insertLink", "bulletedList", "|", "bold", "through", "color", "bgColor", "clearStyle", "aiBtn"],
            }
        }
        // 先创建 editor
        const editor = E.createEditor({
            selector: '#editor-text-area',
            content: [],
            // html: '',
            config: editorConfig
        })
        // 创建 toolbar
        const toolbar = E.createToolbar({
            editor,
            selector: '#editor-toolbar',
            config: {
                excludeKeys: 'fullScreen',
            }
        })
        toolbar.config.insertKeys = {
            index: 30,
            keys: ['saveBtn']
        }

        // 点击空白处 focus 编辑器
        document.getElementById('editor-text-area').addEventListener('click', e => {
            if (e.target.id === 'editor-text-area') {
                editor.blur()
                editor.focus(true) // focus 到末尾
            }
        })
    </script>
</body>

</html>